<template>
  <div class="list" ref="wrapper">
    <div class="content">
      <div class="area" ref="origin">
        <div class="title border-topbottom">您的位置</div>
        <div class="button-list">
          <div class="button-wrapper">
            <div class="button">{{ city }}</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div
            class="button-wrapper"
            v-for="item of hotCities"
            :key="item.id"
            @click="change(item.name)"
          >
            <div class="button">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div
        class="area"
        v-for="item of letters"
        :key="item"
        :ref="(elem) => (elements[item] = elem)"
      >
        <div class="title border-topbottom">{{ item }}</div>
        <ul class="item-list">
          <li
            class="item border-bottom"
            v-for="innerItem of cities[item]"
            :key="innerItem.id"
            @click="change(innerItem.name)"
          >
            {{ innerItem.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import Bscroll from "better-scroll";
import { watch, ref, onMounted } from "vue";
export default {
  name: "CityList",
  props: {
    cities: Object,
    hotCities: Array,
    letters: Array,
    letter: String,
  },
  setup(props) {
    let scroll = null;
    const { wrapper } = useWrapper();
    const { city, change } = storeAndRouterChange();
    const { elements } = letterChanged(props);

    return { city, elements, wrapper, change };
  },
};

function useWrapper() {
  const wrapper = ref(null);
  onMounted(() => {
    scroll = new Bscroll(wrapper.value, {
      click: true,
    });
  });
  return { wrapper };
}

function storeAndRouterChange() {
  const store = useStore();
  const city = store.state.city;
  const router = useRouter();
  function change(value) {
    store.commit("changeCity", value);
    router.push("/");
    // this.scroll.scrollToElement(this.$refs.origin)
  }
  return { city, change };
}

function letterChanged(props) {
  const elements = ref({});
  watch(
    () => props.letter,
    (newVal) => {
      const el = elements.value[newVal];
      scroll.scrollToElement(el);
    }
  );
  return { elements };
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.border-topbottom {
  &:before {
    border-color: #ccc;
  }

  &:after {
    border-color: #ccc;
  }
}

.border-bottom {
  &:before {
    border-color: #ccc;
  }
}

.list {
  position: absolute;
  top: 1.58rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  font-size: 0.26rem;

  .title {
    line-height: 0.54rem;
    background: #eee;
    color: #666;
    padding-left: 0.2rem;
  }

  .button-list {
    overflow: hidden;
    padding: 0.1rem 0.6rem 0.1rem 0.2rem;

    .button-wrapper {
      width: 33.33%;
      float: left;

      .button {
        margin: 0.1rem;
        text-align: center;
        padding: 0.1rem;
        border: 0.02rem solid #ccc;
        border-radius: 0.06rem;
      }
    }
  }

  .item-list {
    .item {
      line-height: 0.76rem;
      padding-left: 0.2rem;
    }
  }
}
</style>>